@font-face {
    font-family: 'iconfont';
    src: url('../fonts/iconfont.eot');
    src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/iconfont.woff2') format('woff2'),
        url('../fonts/iconfont.woff') format('woff'),
        url('../fonts/iconfont.ttf') format('truetype'),
        url('../fonts/iconfont.svg#iconfont') format('svg');
}

.icon {
    font-family: 'iconfont';
}

.container {
    max-width: 7.5rem;
    width: 100%;
}

.top {
    max-width: 7.5rem;
    width: 100%;
    margin: 0 auto;
    background: url("../images/my_bg.jpg") no-repeat;
    background-size: 100%;
    padding-top: .2rem;
}

.top .title {
    margin-left: .24rem;
    margin-right: .24rem;
    font-size: .3rem;
    height: .3rem;
    text-align: center;
    line-height: .3rem;
    /* margin-top: .24rem; */
    color: #fff;
}

.top .title span:first-child {
    display: block;
    float: left;
}

.top .title span:last-child {
    display: block;
    float: right;
}

.top p::after {
    content: '';
    display: block;
    clear: both;
}

.top .my_info {
    margin: .56rem .4rem;
    border-radius: .11rem;
    padding-top: .37rem;
    background-color: #fff;
    box-shadow: 0 0 .18rem #666666;
    position: relative;
}

.top .my_info .user_info {
    height: 0.98rem;
    margin: 0 auto;
    position: relative;
}

.top .my_info .user_info img {
    display: block;
    float: left;
    width: .95em;
    height: .95rem;
    border-radius: 50%;
    margin-left: .3rem;
    margin-top: .03rem;
}

.top .my_info .user_info .name {
    /* height: .24rem;
    line-height: .24rem; */
    float: left;
    font-size: .3rem;
    margin-left: .12rem;
    margin-right: .18rem;
}

.top .my_info .user_info a {
    float: left;
    text-align: center;
    width: 0.9rem;
    height: 0.32rem;
    /* line-height: 0.32rem; */
    font-size: .24rem;
    background-color: #ff4768;
    color: #fff;
    border-radius: .12rem;
    margin-left: .19rem;
}

.top .my_info .user_info .uid {
    position: absolute;
    top: .2rem;
    left: 1.3rem;
    color: #7e7e7e;
    margin-top: .21rem;
    font-size: .24rem;
    margin-left: .12rem;
}

.top .my_info .user_info span {
    font-size: .3rem;
    color: #666666;
    position: absolute;
    top: .0rem;
    right: .34rem;
}

.top .title>span:last-child {
    position: relative;
}

.top .title>span:last-child::after {
    content: '';
    display: block;
    width: 0.09rem;
    height: 0.09rem;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    left: .23rem;
    top: -.02rem;
}

.top .my_info ul {
    margin-top: .35rem;
}

.top .my_info ul li {
    width: 1.74rem;
    margin-right: .72rem;
    text-align: center;
    float: left;
}

.top .my_info ul li:last-child {
    margin-right: .04rem;
}

.top .my_info ul li img {
    display: block;
    width: 0.52rem;
    height: 0.52rem;
    margin: 0 auto;
}

.top .my_info ul li p:nth-child(2) {
    height: 0.24rem;
    line-height: .24rem;
    margin-top: .18rem;
    margin-bottom: .14rem;
    font-size: .3rem;
    font-weight: 500;
}

.top .my_info ul li p:nth-child(3) {
    height: 0.2rem;
    line-height: .2rem;
    font-size: .24rem;
    color: #b8b8b8;
    margin-bottom: .36rem;
}

.top .my_info ul::after {
    content: '';
    display: block;
    clear: both;
}


/* 我的功能列表 */
.my_infolist {
    margin-top: .7rem;
}

.my_infolist ul li {
    /* line-height: .24rem; */
    height: 0.24rem;
    font-size: .35rem;
    font-weight: 500;
    padding-left: .26rem;
    margin: 0 auto;
    margin-bottom: .57rem;
    letter-spacing: .2em;
    /* padding-top: .05rem; */
    /* color: #ff4768; */
}

.my_infolist ul li>a {
    height: .24rem;
    line-height: .24rem;
    margin: 0;
    /* font-size: .35rem; */
    font-weight: 500;
}

.my_infolist ul li span:nth-child(1) {
    font-size: .4rem;
    color: #ff4768;

    margin-right: .12rem;
}

.my_infolist ul li span:last-child {
    font-size: .18rem;
    margin-right: .4rem;
}

.my_infolist button {
    width: 100%;
    border-radius: .1rem;
    height: .5rem;
    padding: .08rem;
    text-align: center;
    background-color: #ff4768;
}








/* @media screen and (min-width: 800px) {
    .container{
        max-width: 16rem;
        width: 100%;
    }
     .nav{
        max-width: 16rem;
        width: 100%;
    }
    .nav ul li {
        width: 3rem;
    }
    .nav ul li img {
        margin-left: 1.28rem;
    } 
} */